<nz-tabset (nzSelectedIndexChange)='getOdd($event)' [nzSelectedIndex]="activeTabIndex">
    <nz-tab>
        <ng-template #nzTabHeading>
            已被绑定设备
        </ng-template>
        
        <nz-collapseset [nzBordered]="false" class="filter-form">
            <nz-collapse [nzTitle]="'显示筛选条件'">
                <nz-card>
                    <ng-template #body>
                        <form nz-form [nzType]="'inline'">
                            <div nz-form-item>
                                <div nz-form-label>
                                    <label>设备类型</label>
                                </div>
                                <div nz-form-control>
                                    <nz-select nzAllowClear [nzShowSearch]="true">
                                        <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.label" [nzValue]="option.value">
                                        </nz-option>
                                    </nz-select>
                                </div>
                            </div>
                            <div nz-form-item>
                                <div nz-form-label>
                                    <label>型号/序列号</label>
                                </div>
                                <div nz-form-control>
                                    <nz-input name="deviceSidOrModel" [(ngModel)]="filter.deviceSidOrModel"></nz-input>
                                </div>
                            </div>
                            <div nz-form-item>
                                <div nz-form-label>
                                    <label>经销商账户</label>
                                </div>
                                <div nz-form-control>
                                    <nz-input name="dealerAccounts" [(ngModel)]="filter.dealerAccounts"></nz-input>
                                </div>
                            </div>
                            <div nz-form-item>
                                <div nz-form-label>
                                    <label>客户账户</label>
                                </div>
                                <div nz-form-control>
                                    <nz-input name="customerAccounts" [(ngModel)]="filter.customerAccounts"></nz-input>
                                </div>
                            </div>
                        </form>
                    </ng-template>
                </nz-card>
            </nz-collapse>
        </nz-collapseset>
        <!-- <ree-binded></ree-binded> -->
        <nz-table #nzTableCustomers0 [nzIsPagination]="false" [nzAjaxData]="devicesList" [nzSize]="'middle'">
            <thead nz-thead>
                <tr>
                    <th nz-th><span>设备类型</span></th>
                    <th nz-th><span>品牌</span></th>
                    <th nz-th><span>型号/序列号</span></th>
                    <th nz-th><span>经销商账户</span></th>
                    <th nz-th><span>客户账号</span></th>
                    <th nz-th><span>操作</span></th>
                </tr>
            </thead>
            <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let data of nzTableCustomers0.data">
                    <td nz-td>{{data.type}}</td>
                    <td nz-td>{{data.brand}}</td>
                    <td nz-td>{{data.brandModel}}/{{data.sid}}</td>
                    <td nz-td>{{data.dealerAccout}}</td>
                    <td nz-td>{{data.customerAccout}}</td>
                    <td nz-td>
                        <nz-popconfirm [nzTitle]="'确定要解除关联吗？'" (nzOnConfirm)="confirmDelete()" [nzPlacement]="'left'" (nzOnCancel)="cancelDelete()">
                            <a nz-popconfirm>解除</a>
                        </nz-popconfirm>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </nz-tab>
    <nz-tab>
        <ng-template #nzTabHeading>
            未被绑定设备
        </ng-template>

        <!-- <ree-unbounded></ree-unbounded>-->
        <nz-collapseset [nzBordered]="false" class="filter-form">
            <nz-collapse [nzTitle]="'显示筛选条件'">
                <nz-card>
                    <ng-template #body>
                        <form nz-form [nzType]="'inline'">
                            <div nz-form-item>
                                <div nz-form-label>
                                    <label>设备类型</label>
                                </div>
                                <div nz-form-control>
                                    <nz-select nzAllowClear [nzShowSearch]="true">
                                        <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.label" [nzValue]="option.value">
                                        </nz-option>
                                    </nz-select>
                                </div>
                            </div>
                            <div nz-form-item>
                                <div nz-form-label>
                                    <label>型号/序列号</label>
                                </div>
                                <div nz-form-control>
                                    <nz-input name="deviceSidOrModel" [(ngModel)]="filter.deviceSidOrModel"></nz-input>
                                </div>
                            </div>
                        </form>
                    </ng-template>
                </nz-card>
            </nz-collapse>
        </nz-collapseset>
        <nz-table #nzTableCustomers1 [nzIsPagination]="false" [nzAjaxData]="devicesList" [nzSize]="'middle'">
            <thead nz-thead>
                <tr>
                    <th nz-th><span>设备类型</span></th>
                    <th nz-th><span>品牌</span></th>
                    <th nz-th><span>型号</span></th>
                    <th nz-th><span>序列号</span></th>
                    <th nz-th><span>操作</span></th>
                </tr>
            </thead>
            <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let data of nzTableCustomers1.data">
                    <td nz-td>{{data.type}}</td>
                    <td nz-td>{{data.brand}}</td>
                    <td nz-td>{{data.brandModel}}</td>
                    <td nz-td>{{data.sid}}</td>
                    <td nz-td><a (click)="showModal()">绑定</a></td>
                </tr>
            </tbody>
        </nz-table>
        <div class="reeF-center-btn">
            <button nz-button (click)="skipToCreate()">
                <span>新建设备</span>
            </button>
        </div>

        <nz-modal [nzContent]="modalContent" [nzWrapClassName]="'vertical-center-modal'" [nzVisible]="isVisible" [nzTitle]="'选择客户账号'"
            [nzClosable]="false" (nzOnCancel)="cancelBind($event)" (nzOnOk)="confirmBind($event)">
            <ng-template #modalContent>
                <nz-select nzAllowClear [nzPlaceHolder]="'选择一个客户账号'" [(ngModel)]="selectedOption" [nzShowSearch]="true">
                    <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.label" [nzValue]="option.value">
                    </nz-option>
                </nz-select>
            </ng-template>
        </nz-modal>
    </nz-tab>
</nz-tabset>